<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>订单管理</title>
    <th:block th:include="base::header"/>
</head>
<body>
<div class="x-nav">
    <span class="layui-breadcrumb"> <a href="">首页</a> <a href="">用户管理</a>
        <a> <cite>用户展示</cite></a>
    </span> <a class="layui-btn layui-btn-small"
               style="line-height: 1.6em; margin-top: 3px; float: right"
               onclick="location.reload()" title="刷新"> <i
        class="layui-icon layui-icon-refresh" style="line-height: 30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body layui-table-body layui-table-main">

                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline">
                            <select name="attr" lay-filter="select">
                                <option value="1" selected>产品编号</option>
                                <option value="2">产品名称</option>
                            </select>
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input id="input" type="text" name="username" placeholder="请输入"
                                   autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button id="search" class="layui-btn" >
                                <i class="layui-icon">&#xe615;</i>
                            </button>
                        </div>
                    </form>
                    <table class="layui-table layui-form" lay-data="{id: 'idTest'} " lay-filter="test"id="table">
                    </table>
                </div>

            </div>
        </div>
    </div>
</div>
</body>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe61f;</i>添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete"><i class="layui-icon">&#x1006;</i>删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="update"><i class="layui-icon">&#xe642;</i>编辑</button>
    </div>
</script>
<script>
    var url1="list";
    var url2="search"
    $(function(){
        load(url1);
    });

    function load(url){
        var type=1;
        layui.use([ 'laydate', 'form', 'table','jquery' ], function() {
            var laydate = layui.laydate;
            var form = layui.form;
            var table = layui.table;
            $=layui.jquery;
            table.render({
                height : 512,
                elem : '#table',
                toolbar: '#toolbarDemo',
                url : url,
                page : true,
                parseData: function(res){ //res 即为原始返回的数据
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.data.total, //解析数据长度
                        "data": res.data.list //解析数据列表
                    };
                },
                id: 'idTest',
                cols : [
                    [
                        {type:'checkbox',width:60},
                        {field : 'productId',title : '产品编号', sort : true,align : 'center'},
                        {field : 'productName',title : '产品名称',align : 'center'},
                        {field : 'productType',title : '产品种类',align : 'center'},
                        {field : 'status',title : '状态', align : 'center',templet: function (d) {
                                if (d.status==1){
                                    return "正常";
                                }else if(d.status==2){
                                    return "停产";
                                }else{
                                    return "未知状态";
                                }
                            }},
                        {title :'产品介绍',align : 'center',templet: '<div><a onclick="toNote(this,{{d.productId}})" href="javascript:;" class="layui-table-link">点击查看</a></div>'},
                        {title :'相关图片',align : 'center',templet: '<div><a onclick="toImage(this,{{d.productId}})" href="javascript:;" class="layui-table-link">点击查看</a></div>'},
                        //{title : '操作',align : 'center',templet: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>'},
                    ]
                ]
            });

            //触发事件
            form.on('select(select)', function(data){
                console.log(data.value);
                type=data.value;
            });
            $("#search").click(function(){

                var condition=$("#input").val();
                if (condition=="") {
                    layer.msg("未输入内容",{
                        icon: 2,
                        time: 1000
                    })
                }else{
                    url2=url2+"?type="+type+"&condition="+condition;
                    console.log(url2);
                    load(url2);
                    url2="search";
                    return false;
                }
            });

            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'add':
                    {
                        //layer.msg('添加');
                        xadmin.open('添加工艺要求','toadd',800,600);
                    }
                        break;
                    case 'delete':
                    {
                        layer.confirm('确认要删除吗？', function() {
                            console.log(checkStatus);
                            var data=checkStatus.data;
                            var ids=[];
                            $.each(data,function (index,item) {
                                ids.push(item.productId);
                            });
                            //怎么向后面传递数组？
                            $.post("delete",{'ids':ids.join(',')},function(res){
                                if(res.msg){
                                    layer.msg('已删除!', {
                                        icon : 1,
                                        time : 1000
                                    },function() {
                                        location.reload();
                                    });
                                }else {
                                    if(res.msg==null){
                                        layer.msg(res,{icon:2,time:2000});
                                    }else {
                                        layer.msg(res.msg,{icon:2,time:2000});
                                    }
                                }

                            });
                        });
                    }
                        break;
                    case 'update':
                    {
                        //layer.msg('编辑');
                        var data=checkStatus.data;
                        if (data.length==1) {
                            var id=data[0].productId;
                            console.log(data);
                            xadmin.open('编辑用户','toedit?id='+id,800,600);
                        }else if (data.length==0) {
                            layer.msg('未选择!', {
                                icon : 3,
                                time : 1000
                            });
                        }else{
                            layer.msg('只能选择一个编辑!', {
                                icon : 3,
                                time : 1000
                            });
                        }
                    }
                        break;
                }
            });
        });
    }

    function toNote(obj,id){
        console.log(id);
        xadmin.open('产品介绍','tonote?id='+id,800,600);
    }
    function toImage(obj,id){
        console.log(id);
        xadmin.open('样图','topicture?id='+id,800,600);
    }
</script>
</html>
